import { CSSProperties, useEffect, useState } from 'react';
import styled from 'styled-components';
import { Button, Modal, Result } from 'antd';
import { DatabaseOutlined, TableOutlined } from '@ant-design/icons';

// import { DataViewApplication } from 'data-viewer';
import { DomainCategoryTree } from './components';
import { MetaDataObjectPanel, MetaDataDomainPanel } from './components';

export const MetaDataViewerPage = (props: { style?: CSSProperties }) => {

    const [domainIdentifier, setDomainIdentifier] = useState<string | null>(null);

    const [objectIdentifier, setObjectIdentifier] = useState<string | null>(null);

    const [version, setVersion] = useState<number>(0);

    return (
        <Container style={props.style}>
            <DomainCategoryTree
                style={{
                    width: '220px',
                    minWidth: '220px',
                    borderRight: '1px solid #DEDEDE',
                    backgroundColor: '#FFFFFF',
                }}
                onDomainSelected={async (domainIdentifier) => {
                    setDomainIdentifier(domainIdentifier);
                    setObjectIdentifier(null);
                }}
                onSelected={async (key, item) => {
                    setDomainIdentifier(null);
                    setObjectIdentifier(key);
                }}
                version={version}
            ></DomainCategoryTree>
            {
                domainIdentifier && <MetaDataDomainPanel
                    style={{
                        flex: 1,
                        display: objectIdentifier ? 'none' : undefined
                    }}
                    domainIdentifier={domainIdentifier}
                    onDomainChange={async (domainIdentifier: string) => {
                        //
                        setVersion(new Date().getTime());
                    }}
                ></MetaDataDomainPanel>
            }
            {
                objectIdentifier && <MetaDataObjectPanel
                    style={{
                        flex: 1,
                        display: domainIdentifier ? 'none' : undefined
                    }}
                    objectIdentifier={objectIdentifier}
                ></MetaDataObjectPanel>
            }
            {
                !domainIdentifier && !objectIdentifier && <EmptyContainer>
                    请选择域！
                </EmptyContainer>
            }
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
`;

const EmptyContainer = styled.div`
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
`;